<template>
  <div class="app-container">
    <el-card>
      <el-form :model="searchForm" inline size="small">
        <el-form-item label="关键字">
          <el-input
            v-model="searchForm.keyword"
            placeholder="关键字"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="所属流程">
          <el-select
            v-model="searchForm.dictQstnCate"
            placeholder="所属流程"
            clearable
          >
            <el-option
              v-for="item in productQstnCate"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="问题级别">
          <el-select
            v-model="searchForm.level"
            placeholder="问题级别"
            clearable
          >
            <el-option
              v-for="item in ProblemLevel"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            size="mini"
            icon="el-icon-refresh"
            @click="handleResetList()"
            >重置</el-button
          >
          <el-button
            size="mini"
            icon="el-icon-search"
            type="primary"
            @click="handleSearchList()"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <el-button
        @click="addQuestTion()"
        icon="el-icon-plus"
        size="small"
        type="primary"
        >新建问题</el-button
      >
      <el-table
        :data="tableData.data"
        v-loading="listLoading"
        border
        stripe
        size="mini"
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column
          label="ID"
          width="55"
          prop="id"
          align="center"
        ></el-table-column>
        <el-table-column
          label="问题"
          prop="name"
          align="center"
        ></el-table-column>
        <el-table-column label="等级" align="center">
          <template slot-scope="scope">
            <el-tag type="success" size="mini" disable-transitions>
              {{ scope.row.level + 1 }}级
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="所属流程"
          prop="dictQstnCateName"
          align="center"
        ></el-table-column>
        <el-table-column
          label="创建时间"
          prop="createTime"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="editQuestTion(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="deleteQuestTion(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pageRight"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :current-page="searchForm.pageNum"
        :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
      >
      </el-pagination>

      <el-dialog
        :title="addForm.id ? '编辑问题' : '新增问题'"
        :visible.sync="visible"
        width="640px"
        append-to-body
        @close="handleCancel"
      >
        <el-form
          :model="addForm"
          label-width="80px"
          size="small"
          :rules="addRules"
          ref="addForm"
        >
          <el-form-item label="问题名称" prop="name">
            <el-input
              style="width: 500px"
              v-model="addForm.name"
              placeholder="问题名称"
              maxlength="50"
              show-word-limit
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="所属上级" prop="parentId">
            <treeselect
              style="width: 500px"
              v-model="addForm.parentId"
              :options="treelist"
              :normalizer="normalizer"
              placeholder="请选择所属上级"
              :default-expand-level="2"
            />
          </el-form-item>
          <el-form-item label="所属流程" v-if="addForm.parentId==0" prop="dictQstnCate">
            <el-select
              v-model="addForm.dictQstnCate"
              placeholder="所属流程"
              style="width: 500px"
              clearable
            >
              <el-option
                v-for="item in productQstnCate"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label-width="0">
            <div style="text-align: center">
              <el-button
                style="width: 100px"
                type="primary"
                @click="onSubmit('addForm')"
                >确 定</el-button
              >
              <el-button style="width: 100px" @click="visible = false"
                >取 消</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getDictData, getDictLabel } from "@/utils/dict";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {
  addMachine,
  getMachineList,
  getMachineNoPage,
  updateMachine,
  deleteMachine,
} from "@/api/IntelligentService";
import { handleTree } from "@/utils/auth";
export default {
  components: { Treeselect },
  data() {
    return {
      searchForm: {
        level: "",
        keyword: "",
        dictQstnCate: "",
        pageNum: 1,
        pageSize: 10,
      },
      productQstnCate: [],
      ProblemLevel: [
        { label: "一级", value: 0 },
        { label: "二级", value: 1 },
        { label: "三级", value: 2 },
      ],
      tableData: {
        data: [],
        total: 0,
      },
      listLoading: false,
      visible: false,
      addForm: {
        dictQstnCate: "",
        name: "",
        parentId: "0",
      },
      addRules: {
        name: [{ required: true, message: "请输入问题名称", trigger: "blur" }],
        parentId: [
          { required: true, message: "请选择所属上级", trigger: "blur" },
        ],
        dictQstnCate: [
          { required: true, message: "请选择所属流程", trigger: "blur" },
        ],
      },
      treelist: [],
    };
  },
  async created() {
    this.productQstnCate = await getDictData("product_qstn_cate");
    // this.getTreeList();
    this.getList();
  },
  methods: {
    handleCancel() {
      this.addForm = {
        dictQstnCate: "",
        name: "",
        parentId: "0",
      };
      this.$refs.form.resetFields();
    },
    deleteQuestTion(v) {
      this.$confirm("此操作将永久删除该, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteMachine(v.id).then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getList();
        });
      });
    },
    editQuestTion(v) {
      this.addForm.dictQstnCate = v.dictQstnCate;
      this.addForm.name = v.name;
      this.addForm.id = v.id;
      this.$set(this.addForm, "parentId", v.parentId);
      this.getTreeList();
    },
    handleSearchList() {
      this.searchForm.pageNum = 1;
      this.getList();
    },
    handleResetList() {
      this.searchForm = {
        level: "",
        keyword: "",
        dictQstnCate: "",
        pageNum: 1,
        pageSize: 10,
      };
      this.getList();
    },
    onSubmit(form) {
      this.$refs[form].validate(async (valid) => {
        if (valid) {
          if (this.addForm.id) {
            updateMachine(this.addForm).then((res) => {
              this.$message({
                message: "修改成功",
                type: "success",
              });

              this.addForm = {
                dictQstnCate: "",
                name: "",
                parentId: "0",
                id: "",
              };
              this.getList();
            });
          } else {
            addMachine(this.addForm).then((res) => {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.addForm = {
                dictQstnCate: "",
                name: "",
                parentId: "0",
              };
              this.getList();
            });
          }
          this.visible = false;
        } else {
        }
      });
    },

    async getTreeList() {
      const res = await getMachineNoPage();
      let treeData = handleTree(res.data);
      this.treelist = [
        {
          name: "主目录",
          id: 0,
          children: treeData,
        },
      ];

      this.visible = true;
    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children,
      };
    },
    addQuestTion() {
      this.getTreeList();
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getList();
    },
    getList() {
      this.listLoading = true;
      getMachineList(this.searchForm)
        .then((response) => {
          response.data.list.forEach((item) => {
            item.dictQstnCateName = getDictLabel(
              item.dictQstnCate,
              this.productQstnCate
            );
          });
          this.tableData.data = response.data.list;
          this.tableData.total = response.data.total;

          this.listLoading = false;
        })
        .finally((v) => {
          this.listLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped></style>
